<template>
  <basic-container :btnFlag="true">
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <el-image style="width:100%; height: 100%"
                :src="imgList[$route.query.id].url"
                fit='fill'
                @click="preview(imgList[$route.query.id].url)"></el-image>
      <el-link type="primary"
               style="margin-left:20px;border: 1px solid #409EFF;padding: 10px;border-radius: 6px;"
               :href="urlList[$route.query.id]">提纲模板下载</el-link>
      <div class="card-body">
        <avue-crud :data="tableData"
                   :option="tableOption"
                   :page="page"
                   :table-loading="tableLoading"
                   @on-load="getList"
                   @refresh-change="refreshChange"
                   class="avuecrud">
          <template slot-scope="scope"
                    slot="menu">
            <!-- <div class="menu-title" @click.stop="resultEdit(scope.row,scope.index)"
               v-if="permissions.planning_achievement_edit&&scope.row.source=='0'&&isNowDept(scope.row.deptId)">
            <i class="iconfont iconalter" style="color: #ec950a;"></i>
            <p class="menu-title-text">编辑</p>
          </div> -->
            <div class="menu-title">
              <div v-if="scope.row.textId">
                <el-link @click="download(scope.row.textId)"
                         type="danger">材料下载
                </el-link>
              </div>
            </div>
          </template>
        </avue-crud>
      </div>
    </div>
    <el-dialog :visible.sync="previewVisible"
               width="90%">
      <img :src="previewImgurl"
           alt
           style="width:100%;height:auto" />
    </el-dialog>
  </basic-container>
</template>

<script>
import { makeList } from "@/api/make";
import { resultList } from "@/api/planning/result";
import { PROJECT_DIC } from "@/const/dict";
import { getOpinionList } from "@/api/opinion";
import { mapGetters } from "vuex";
import { getFileTypeFile } from '@/views/util'
import store from "@/store"; // progress bar style
export default {
  name: "templatePlan",
  created () {
    window.resultDetail = this.resultDetail;
    this.type = this.$route.query.type;
  },
  computed: mapGetters([
    "permissions"
  ]),
  data () {
    return {
      urlList: ['./发展规划模板.doc', './空间规划模板.doc', './专项规划模板.doc', './区域规划模板.doc'],
      tableData: [],
      tableOption: {
        page: true,
        addBtn: false,
        editBtn: false,
        addRowBtn: false,
        indexLabel: "序号",
        index: true,
        cellBtn: false,
        indexWidth:70,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        filterBtn: false,
        searchBtn: false,
        menuWidth: 100,
        keyId: "id",
        column: [
          {
            label: "规划编码",
            width: 200,
            prop: "pmuc",
            cell: true,
          },
          {
            label: "规划名称",
            width: 300,
            prop: "title",
            cell: true,
            formatter: function (row, value, label, column) {
              return '<a style="cursor: pointer;" onclick="resultDetail(\'' + row.achievementId + '\')">' + value + '</a>';
            },
          },
          {
            label: "年份",
            prop: "year",
            cell: true,
          },
          {
            label: "申报单位",
            prop: "orgName",
            cell: true,
          },
          {
            label: "发布层级",
            prop: "planningLevel",
            type: "select",
            dicData: PROJECT_DIC.APPROVING_AUTHORITY_LEVEL,
            cell: true
          },
          {
            label: "规划类型",
            prop: "category",
            type: "select",
            dicData: PROJECT_DIC.CATEGORY,
            cell: true
          },
        ]
      },
      selectedOptions: {
        categorys: "-1",
        planningRanks: "-1",
        planningLevels: "-1",
        area: '-1',
        district: '-1',
        year: '-1'
      },
      previewVisible: false,
      state: '3,4,5',
      imgList: [
        {
          url: "./img/fzgh.png"
        },
        {
          url: "./img/kjgh.png"
        },
        {
          url: "./img/zxgh.png"
        },
        {
          url: "./img/qygh.png"
        }
      ],
      categorys: ['A', 'D', 'B', 'C'],
      previewImgurl: "",
      headerData: {
        title: "规划文本模板参考"
      },
      type: "",
      subjectListData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: false,
      keyword: '',
    };
  },

  mounted() {
      this.urlList = window.location.href.includes('localhost') ?
      ['/download/fzgh.doc', '/download/kjgh.doc', '/download/zxgh.doc', '/download/qygh.doc']:
      ['/download/fzgh.doc?attname=', '/download/kjgh.doc?attname=空间规划模板.doc', '/download/zxgh.doc?attname=专项规划模板.doc', '/download/qygh.doc?attname=区域规划模板.doc'];
  },

  methods: {
    async download (id) {
      let files = await getFileTypeFile(id);
      let url = '/planning/file/download/' + files[0].fileId + '?access_token=' + store.getters.access_token;
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', files[0].fileName);
      document.body.appendChild(link);
      link.click()
    },
    // 成果详情跳转
    resultDetail (achievementId) {
      let src = `/planning/achievement/detail?id=${achievementId}`;
      this.$router.push({
        path: src
      })
    },
    // 查询
    searchSubmit () {
      if (this.selectedOptions.district != -1 && this.selectedOptions.district != '') {
        this.selectedOptions.areaCodeLike = this.selectedOptions.district
      } else {
        this.selectedOptions.areaCodeLike = this.selectedOptions.area
      }
      this.selectedOptions.areaCodeLike = this.selectedOptions.areaCodeLike.substring(0, 6);
      this.getList(this.page)
    },
    // 重置
    searchReset () {
      this.keyword = '';
      this.selectedOptions = this.resetSelectedOptions;
      this.getList(this.page)
    },
    isNowDept (id) {
      if (id === this.deptIdTemp) {
        return true;
      } else if (id !== this.deptIdTemp) {
        return false;
      }
    },
    filterFormData (form) {
      var formMap = {};
      Object.keys(form).forEach(function (name) {
        if (form[name] != -1) {
          formMap[name] = form[name]
        }
      });
      return formMap;
    },
    /**
     * 刷新回调
     */
    refreshChange () {
      this.getList(this.page);
    },
    getList (page) {
      this.tableLoading = true;
      sessionStorage.setItem('this.selectedOptionsHistory.categorys', this.selectedOptions.categorys);
      sessionStorage.setItem('this.selectedOptionsHistory.planningRanks', this.selectedOptions.planningRanks);
      sessionStorage.setItem('this.selectedOptionsHistory.planningLevels', this.selectedOptions.planningLevels);
      sessionStorage.setItem('this.selectedOptionsHistory.area', this.selectedOptions.area);
      sessionStorage.setItem('this.selectedOptionsHistory.district', this.selectedOptions.district);
      sessionStorage.setItem('this.selectedOptionsHistory.year', this.selectedOptions.year);
      sessionStorage.setItem('this.keyword', this.keyword);
      resultList(Object.assign({
        current: page.currentPage,
        size: page.pageSize,
        titleLike: this.keyword,
        states: this.state,
        categorys: this.categorys[this.$route.query.id],
        descs: 'release_Date'
      }, this.filterFormData(this.selectedOptions))).then(response => {
        this.tableData = response.data.data.records;
        this.page.total = response.data.data.total;
        this.tableLoading = false
      })
    },
    preview (url) {
      this.previewVisible = true;
      this.previewImgurl = url
    },
  }
};
</script>

<style lang="scss" scoped>
.top-btn {
  display: flex;
  justify-content: space-around;
  height: 60px;
  align-items: center;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.title {
  font-size: 16px;
  padding-left: 10px;
  color: #020202;
}
.el-link.el-link--primary:hover {
  color: #fff;
  background: #409eff;
}
</style>
